<template>
	<div class="py-2 px-1 flex">
		<base-badge :value="data.commentNum" :max="99">
			<div
				class="w-[34px] h-[34px] rounded-full bg-bg-1 flex justify-center items-center"
				@click="onComment">
				<base-icon name="message" class="text-[20px] text-t-3"></base-icon>
			</div>
		</base-badge>
		<div class="flex-1 ml-2">
			<base-button
				ref="el"
				type="primary"
				size="medium"
				:disabled="buttonDisabled"
				@click="followBet">
				{{ buttonText }}
				<div
					v-if="data.followNum"
					class="absolute right-0 h-[14px] pl-3 pr-4 border-l flex items-center"
					:class="buttonDisabled ? '' : 'border-white'">
					<base-icon name="people"></base-icon>
					<div class="ml-1 text-sm app-font-bold">{{ data.followNum }}</div>
				</div>
			</base-button>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { PropType, computed } from 'vue'
import { useBetslipStore, useFeedStore, useAccountStore } from '@/store'
import { BaseButton, BaseIcon, BaseBadge } from '@/components/base'
import {
	FeedType,
	BetslipItemStatus,
	BetslipBaseType,
	BetslipItemType,
	BetslipComboType
} from '@/types'
import { BettingMethod } from '@/enums'
import { t } from '@/utils'

const props = defineProps({
	data: {
		type: Object as PropType<FeedType>,
		required: true
	},
	isDisabled: {
		type: Boolean,
		default: false
	},
	isLive: {
		type: Boolean,
		default: false
	},
	isMe: {
		type: Boolean,
		default: false
	},
	isResulted: {
		type: Boolean,
		default: false
	}
})

const betslipStore = useBetslipStore()
const feedStore = useFeedStore()
const accountStore = useAccountStore()

const buttonText = computed(() => {
	if (props.isMe) {
		return t(!props.isResulted ? 'feed.pending' : 'feed.result')
	} else {
		return t('feed.followBet')
	}
})

const buttonDisabled = computed(() => {
	if (props.isMe) {
		return !props.isResulted
	} else {
		return props.isDisabled
	}
})

const followBet = (e: MouseEvent) => {
	const { orderType, selections, orderNo, id } = props.data
	const item: BetslipBaseType = {
		amount: 0,
		status: BetslipItemStatus.none,
		type: orderType,
		followOrder: orderNo,
		feedId: id,
		uuid: Date.now()
	}
	const rect = (e.target as HTMLElement).getBoundingClientRect()
	if (orderType === BettingMethod.single) {
		const selection = selections[0]
		betslipStore.follow(
			{
				...item,
				id: selection.id,
				marketId: selection.marketId,
				eventId: selection.eventId,
				selection
			} as BetslipItemType,
			rect
		)
	} else {
		betslipStore.follow(
			{
				...item,
				list: selections.map(({ id, eventId, marketId }) => ({ id, eventId, marketId })),
				selections
			} as BetslipComboType,
			rect
		)
	}
}

const onComment = () => {
	if (!accountStore.isLogin) {
		accountStore.showLogin()
	} else {
		feedStore.showComment(props.data)
	}
}
</script>
